<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.springframework.org/schema/data/jaxb">

<head>
    <meta charset="utf-8">
    <title>影院信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" th:href="@{/managerstatic/plugins/layui/css/layui.css}" media="all" />
</head>

<body>
<script th:src="@{/managerstatic/js/javascript.util.js}"></script>
<script th:src="@{/managerstatic/js/jquery.util.js}"></script>
<script th:src="@{/managerstatic/js/dataCache.js}"></script>
<script th:src="@{/managerstatic/plugins/jquery.min.js}"></script>
<script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
<script>
    layui.use(['laytpl'], function () {
        var laytpl = layui.laytpl;
        var obj = {
            type: 'get'
            , url: "/cinemaInfo/select"
            , data: '%7b%7d'
            , success: function (data) {
                if (data.code === 200) {
                    var getTpl = demo.innerHTML
                        , view = document.getElementById('view');
                    laytpl(getTpl).render(data.result, function (html) {
                        view.innerHTML = html;
                    });
                } else {
                    layer.msg('获取用户信息失败。');
                    console.warn(data.msg);
                }
            }

        };

        //判断是否在服务器环境中，是则用本地数据。
        if (getIsWeb() === false) {
            var data = getJson_getUserInfo();
            obj.success(data);
        } else {
            //jquery ajax请求
            jqueryAjax(obj);
        }
    });
</script>
<div class="layui-btn-container" style="margin: 20px">
    <button class="layui-btn layui-btn-normal" lay-event="updateForm" onclick="updateForm()">编辑</button>
</div>

<div id="view"></div>

<script id="demo" type="text/html">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>影院信息</legend>
    </fieldset>
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col>
            <col width="100">
            <col>
        </colgroup>
        <thead style="display:none" hidden="hidden">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><strong>商标:</strong></td>
            <td><input type="hidden" value="{{d.id}}" id="hiddenId">
                <img src="{{d.logo}}" style="width: 60px;height: 60px"></td>
            <td><strong>版权:</strong></td>
            <td id="tdlogo">{{d.copyright}}</td>
        </tr>

        <tr>
            <td><strong>地址:</strong></td>
            <td id="tdaddress">{{d.address}}</td>
            <td><strong>设施:</strong></td>
            <td id="tdfacility">{{d.facility}}</td>
        </tr>

        <tr>
            <td><strong>门市:</strong></td>
            <td><img src="{{d.img}}" style="width: 60px;height: 60px"></td>
            <td><strong>坐标:</strong></td>
            <td id="tdcoordinate">{{d.coordinate}}</td>
        </tr>
        <tr>
            <td><strong>套餐:</strong></td>
            <td>{{d.managementPackage.packagename}}</td>
        </tr>
        </tbody>
    </table>

</script>

<script>
    function updateForm() {
        layui.use("layer",function() {
            layer.open({
                id: "updateForm",
                type: 1,
                title: "修改影院信息",
                area: ['700px', '400px'],
                btn: ['确定', '取消'],
                content: $("#add-main"),
                success: function () {
                    $("#id").val($("#hiddenId").val());
                    $("#copyright").val($("#tdlogo").html());
                    $("#address").val($("#tdaddress").html());
                    $("#facility").val($("#tdfacility").html());
                    $("#coordinate").val($("#tdcoordinate").html());
                },
                yes: function (index) {
                    $("#cinemaUpdate").submit();
                }

            });
        });
    }
</script>

<div id="add-main" style="display: none;">
    <form class="layui-form" id="cinemaUpdate" action="/cinemaInfo/update" style="margin-top: 30px;margin-right: 40px">
        <input type="hidden" name="id" id="id" />
        <div class="layui-form-item">
            <label class="layui-form-label">影院logo</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img  id="demo1" name="uploadFile" style="width: 40px;height: 40px">
                        <p id="demoText1"></p>
                        <input type="hidden" name="logo" id="imglogo">
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">版权</label>
            <div class="layui-input-block">
                <input name="copyright" type="text" id="copyright" required  lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" id="address" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">设施</label>
            <div class="layui-input-block">
                <input type="text" name="facility" id="facility" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影院门市</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">上传图片</button>
                    <div class="layui-upload-list">
                        <img  id="demo2" name="uploadFile" style="width: 40px;height: 40px">
                        <p id="demoText2"></p>
                        <input type="hidden" name="img" id="img">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">坐标</label>
            <div class="layui-input-block">
                <input type="text" name="coordinate" id="coordinate" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

    </form>
</div>

<script>
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/imgUpload/insert'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $("#imglogo").val(res.data);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test2'
            , url: '/imgUpload/insert'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $("#img").val(res.data);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText2');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</body>

</html>